import 'package:flutter/material.dart';
import '../../utils/base.dart';
import '../../widgets/xpage.dart';
import '../../widgets/tabs.dart';

import 'detail/stats_item.dart';
import 'detail/detail_coin.dart';
import 'detail/detail_point.dart';
import 'detail/detail_ticket.dart';
import 'detail/detail_groupon.dart';

class UserManagerDetail extends StatefulWidget {
  UserManagerDetail({Key key}) : super(key: key);

  UserManagerDetailState createState() => UserManagerDetailState();
}

class UserManagerDetailState extends State<UserManagerDetail> {
  Map<String, Widget> _detailMap = {
    'coin': DetailCoin(),
    'point': DetailPoint(),
    'ticket': DetailTicket(),
    'groupon': DetailGroupon(),
  };

  String _currDetail = 'coin';

  @override
  Widget build(BuildContext context) {
    var mockData = {
      "memberId": '2321321',
      "avatar":
          'https://wx4.sinaimg.cn/mw1024/e927d912gy1g2v9k4l4caj24802tckjo.jpg',
      "nickname": '戴安娜',
      "point": 12312,
      "coin": 123123,
      "ticket": 10,
      "groupon": 1
    };

    Widget left() {
      Widget _nav() {
        return Container(
            height: Design.px(125),
            padding: EdgeInsets.symmetric(horizontal: Design.px(25)),
            child: Stack(
              children: <Widget>[
                Container(
                  alignment: Alignment.center,
                  child: Text("会员详情",
                      style: TextStyle(
                          fontSize: Design.px(40),
                          color: HexColor("ffffff"),
                          decoration: TextDecoration.none)),
                ),
                Positioned(
                  top: Design.px(8),
                  left: Design.px(-25),
                  child: FlatButton(
                    onPressed: () => Navigator.pop(context),
                    child: Image.asset(
                      'assets/icon-back.png',
                      height: Design.px(40),
                    ),
                  ),
                ),
              ],
            ));
      }

      Widget _userInfo() {
        return Column(
          children: <Widget>[
            Padding(
                padding: EdgeInsets.only(top: Design.px(25)),
                child: Hero(
                  tag: mockData['avatar'],
                  child: ClipOval(
                    child: FadeInImage.assetNetwork(
                      placeholder: "assets/logo.png", //预览图
                      fit: BoxFit.cover,
                      image: mockData['avatar'],
                      width: Design.px(160),
                      height: Design.px(160),
                    ),
                  ),
                )),
            Padding(
              padding: EdgeInsets.symmetric(vertical: Design.px(20)),
              child: Text("${mockData['nickname']}(${mockData['memberId']})",
                  style: TextStyle(
                      fontSize: Design.px(33),
                      color: Colors.white,
                      decoration: TextDecoration.none)),
            )
          ],
        );
      }

      Widget _userStats() {
        Widget _line() {
          Radius _r = Radius.circular(Design.px(5));
          return Container(
            height: Design.px(38),
            width: Design.px(5),
            // color: Colors.white,
            decoration: BoxDecoration(
                borderRadius: BorderRadius.vertical(top: _r, bottom: _r),
                color: Colors.white),
            child: Text(""),
          );
        }

        return Column(
          children: <Widget>[
            Padding(
                padding: EdgeInsets.only(
                    left: Design.px(50),
                    top: Design.px(60),
                    right: Design.px(50)),
                child: Column(
                  children: <Widget>[
                    Row(
                      children: <Widget>[
                        _line(),
                        Expanded(
                          child: Padding(
                            padding:
                                EdgeInsets.symmetric(horizontal: Design.px(22)),
                            child: Text(
                              "财务概况",
                              style: TextStyle(
                                  fontSize: Design.px(42),
                                  color: Colors.white,
                                  decoration: TextDecoration.none),
                            ),
                          ),
                        )
                      ],
                    ),
                    GridView.count(
                      physics: const NeverScrollableScrollPhysics(),
                      //ListView嵌套GridView会报错，加此参数后可修正错误： https://segmentfault.com/q/1010000018145105/
                      shrinkWrap: true,
                      //每行3个
                      crossAxisCount: 2,
                      //水平子Widget之间间距
                      crossAxisSpacing: Design.px(20),
                      //垂直子Widget之间间距
                      mainAxisSpacing: Design.px(20),
                      // 中间间隔空白比例  https://blog.csdn.net/hao_m582/article/details/84108041
                      childAspectRatio: 1.2 / 1,
                      padding: EdgeInsets.all(Design.px(20)),
                      children: <Widget>[
                        StatsItem(
                          title: '游戏币',
                          num: mockData['coin'],
                          unit: '个',
                          isActive: _currDetail == 'coin',
                          onPressed: () => setState(() {
                            _currDetail = 'coin';
                          }),
                        ),
                        StatsItem(
                          title: '积分',
                          num: mockData['point'],
                          unit: '',
                          isActive: _currDetail == 'point',
                          onPressed: () => setState(() {
                            _currDetail = 'point';
                          }),
                        ),
                        StatsItem(
                          title: '门票',
                          num: mockData['ticket'],
                          unit: '张',
                          isActive: _currDetail == 'ticket',
                          onPressed: () => setState(() {
                            _currDetail = 'ticket';
                          }),
                        ),
                        StatsItem(
                          title: '优惠券',
                          num: mockData['groupon'],
                          unit: '张',
                          isActive: _currDetail == 'groupon',
                          onPressed: () => setState(() {
                            _currDetail = 'groupon';
                          }),
                        ),
                      ],
                    )
                  ],
                ))
          ],
        );
      }

      return Container(
        height: double.infinity,
        width: Design.px(676),
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [HexColor("ff9774"), HexColor("f85b66")])),
        child: Column(
          children: <Widget>[
            _nav(),
            ListView(
              shrinkWrap: true,
              children: <Widget>[_userInfo(), _userStats()],
            ),
          ],
        ),
      );
    }

    Widget right() {
      return Container(
        height: double.infinity,
        color: HexColor("fefefe"),
        child: _detailMap[_currDetail],
      );
    }

    return Row(
      children: <Widget>[
        left(),
        Expanded(
          child: right(),
        )
      ],
    );
  }
}
